{extend name="base" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline">
        <div class="layui-input-inline">
            {MyTag:game type='channel' /}
        </div>
    </div>
    <div class="layui-inline">
        <a href="javascript:;" class="layui-btn searchBtn my-btn my-btn-sm">搜索</a>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="tableBar">
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="view">查看说明&礼包内容</button>
    {{# if(d.status == '未领取' && d.add_type == 1){ }}
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="get">领取礼包</button>
    {{#  }else if(d.status == '已领取'){ }}
    <button style="margin-left:10px;" class="layui-btn-sm layui-btn-disabled" disabled lay-event="get">领取礼包</button>
    {{#  }else if(d.status == '礼包码不足'){ }}
    <button style="margin-left:10px;" class="layui-btn-sm layui-btn-disabled" disabled lay-event="get">领取礼包</button>
    {{#  }else{ }}
    <button style="margin-left:10px;" class="layui-btn-sm layui-btn-disabled" disabled lay-event="get">领取礼包</button>
    {{#  } }}
</script>
{/block}

{block name="css"}
{/block}

{block name="js"}
<script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table
            ,$ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,load = layer.load()
            ,active = {
                reload: function () {
                    var game_id = $('#game_id').val();

                    table.reload('tableId', {
                        page: {curr: 1}
                        , where: {game_id:game_id}
                        ,height: 'full-80'
                    })
                },
            };

        //表格初始化
        table.render({
            elem: '#tableBox'
            ,height: 'full-80'
            ,url: '{:url("GameBag/index")}'
            ,page: true
            ,limit:20
            ,limits:[20,40,60,80]
            ,loading:true
            ,id:'tableId'
            ,done: function (res, curr, count) {
                layer.close(load);
            }
            ,cols: [[
                {field:'game_id', title: '游戏ID', width: 100}
                ,{field:'game_name', title: '游戏名称' , width: 150}
                ,{field:'type_id', title: '礼包类型', width: 150}
                ,{field:'name', title: '标题', width: 250}
                ,{field:'give_num', title: '可领数量', width: 90}
                ,{field:'add_time', title: '发布时间', width: 170, sort:true}
                ,{field:'status', title: '状态', width: 200}
                ,{field:'operate', title: '操作', align:'center', toolbar:'#tableBar'}
            ]]
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        //监听工具条
        table.on('tool(tableBox)', function(obj){
            var data = obj.data;
            if(obj.event === 'view'){
                layer.open({
                    type: 1
                    ,title: '礼包内容'
                    ,area: ['1000px', '600px']
                    ,shadeClose: true
                    ,offset: '100px'
                    ,content: '<div style="padding: 20px;"><div><strong>使用方法：</strong></div><div style="text-indent: 2em; margin: 5px 0 10px 0;">'+data.explain+'</div><div><strong>礼包内容：</strong></div><div style="text-indent: 2em; margin: 5px 0 10px 0;">'+data.content+'</div></div>'
                });
            }else if(obj.event === 'get'){
                console.dir(obj);
                layer.confirm('确定要领取礼包吗？', {offset: '250px'}, function(index){
                    layer.msg('领取中....', {icon: 1, time: 2000});
                    window.location.href = '{:url("GameBag/get")}?id='+data.id;
                    $(obj.tr).find("td[data-field='status']").html('<div class="layui-table-cell laytable-cell-1-status">已领取</div>');

                    $(obj.tr).find("td[data-field='operate']").find("button[lay-event='get']").addClass('layui-btn-disabled').removeClass('layui-btn-normal layui-btn').attr('disabled', true).css('margin-left', '10px');
                });
            }
        });
    });
</script>
{/block}